<template>
  <div class="py-8">
    <div class="text-center mb-12">
      <h1 class="text-4xl font-noto font-bold text-accent mb-4">清单</h1>
      <p class="text-lg text-accent opacity-80">我们的愿望清单</p>
    </div>

    <div class="max-w-2xl mx-auto">
      <div class="space-y-4">
        <!-- 清单列表 -->
        <div class="card p-4">
          <div class="flex items-center justify-between">
            <div class="flex items-center space-x-4">
              <input type="checkbox" class="w-5 h-5 rounded border-accent/20 text-accent focus:ring-accent">
              <div>
                <h3 class="font-noto font-bold text-accent">一起去旅行</h3>
                <p class="text-sm text-accent/60">计划中</p>
              </div>
            </div>
            <button class="text-accent hover:text-accent/80">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                <path d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z" />
              </svg>
            </button>
          </div>
        </div>

        <div class="card p-4">
          <div class="flex items-center justify-between">
            <div class="flex items-center space-x-4">
              <input type="checkbox" class="w-5 h-5 rounded border-accent/20 text-accent focus:ring-accent">
              <div>
                <h3 class="font-noto font-bold text-accent">一起看电影</h3>
                <p class="text-sm text-accent/60">已完成</p>
              </div>
            </div>
            <button class="text-accent hover:text-accent/80">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                <path d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z" />
              </svg>
            </button>
          </div>
        </div>
      </div>

      <!-- 添加新项目按钮 -->
      <div class="mt-8 text-center">
        <button class="btn btn-accent">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" clip-rule="evenodd" />
          </svg>
          添加新项目
        </button>
      </div>
    </div>
  </div>
</template>

<script setup>
// 组件逻辑
</script> 